<template>
    <div>
        <el-select v-model="selectedVal" :placeholder="placeholder" @change="selectChange">
            <el-option v-for="item in options" :key="item.value" :name="item.value" :label="item.label"
                :value="item.value" :disabled="item.disabled">
            </el-option>
        </el-select>
    </div>
</template>
<script>
    export default {
        name: "selectPara",
        props: {
            size: { // 下拉框大小
                type: String,
                default: ""
            },

            value: { // v-model绑定值
                type: [String, Array, Number, Boolean],
                default () {
                    if (this.multiple) return []
                    else return ''
                }
            },
            label: { // label值
                type: [String, Array, Number, Boolean],
                default () {
                    if (this.multiple) {
                        return []
                    }
                    if (!this.multiple) {
                        return ''
                    }
                }
            },
            placeholder: {
                type: String,
                default: '请选择'
            },
            clearable: { // 选项是否可清除
                type: Boolean,
                default: true
            },
            disabled: { // 是否禁用
                type: Boolean,
                default: false
            },

        },
        computed: {
            selectedVal: {
                get: function () {
                    return this.value
                },
                set: function (val) {
                    this.$emit("input", val);
                }
            },
        },
        data() {
            return {
                options: [{
                    value: 'pattern1',
                    label: '正则1'
                }, {
                    value: 'pattern2',
                    label: '正则2'
                }, {
                    value: 'pattern3',
                    label: '正则3'
                }, {
                    value: 'pattern4',
                    label: '正则4'
                }, {
                    value: 'pattern5',
                    label: '正则5'
                }],
            };
        },
        methods: {
            selectChange(val) { // 选择change事件
                let obj = this.options.find(v => v.value == val);
                if (obj) {
                    this.$emit("update:label", obj.label);
                }
            },

        }
    }

</script>
